<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ByteCollege云课</title>
    <link rel="stylesheet" th:href="@{/font/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" href="/static/css/bootstrap.css">
    <link rel="stylesheet" th:href="@{/css/global.css}" href="/static/css/global.css">
    <script th:src="@{/js/jquery-3.3.1.min.js}" src="/static/js/jquery-3.3.1.min.js"></script>
    <script th:src="@{/js/bootstrap.js}" src="/static/js/bootstrap.js"></script>
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <style>

        .carousel-inner .item img{
            width: 90%;
            height: 400px;
            margin: 0 auto;
            /*object-fit: cover;*/
        }
    </style>

</head>
<body>
<div th:fragment="head-nav">
    <nav class="navbar navbar-default navbar-fixed-top header">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#header-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">实验楼</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{/index}">
                    <img th:src="@{/img/logo_03.png}">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="header-navbar-collapse">
                <ul class="nav navbar-nav">

                    <li class="">
                        <a th:href="@{/index}">首页</a>
                    </li>
                    <li class="">
                        <a th:href="@{/course/search}">课程</a>
                    </li>
                    <li class="">
                        <a th:href="@{/article/forum}">讨论区</a>
                    </li>
                    <li class=" new-nav logo-1111">
                        <a th:href="@{/toVip}">会员</a>
                    </li>
                </ul>
                <div th:unless="${session?.data?.userId}" class="navbar-right btns">
                    <a class="btn btn-default navbar-btn sign-in" data-sign="signup" th:href="@{/user/tologin}"
                       data-toggle="modal">登录</a>
                    <a class="btn btn-default navbar-btn sign-up" data-sign="signup" th:href="@{/user/toReg}"
                       data-toggle="modal">注册</a>
                </div>
                <ul th:if="${session?.data?.userId}" class="nav navbar-nav navbar-right"
                     >

                    <ul th:if="${session?.data?.userId}" class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding:10px;">
                                <img class="img-circle" th:src="@{${session.data.userHeadphoto}}" width="30" height="30">
                                <span class="text-muted" style="text-decoration: none;font-size: 16px;">&nbsp;我的昵称</span>
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" style="color: white" >
                                <li><a class="" th:href="@{/user/toUpdateInfo}">我的信息</a></li>
                                <li><a class="" th:href="@{/user/getArticle}">我的文章</a></li>
                                <li><a class="" th:href="@{/user/getCourseCollect}">课程收藏</a></li>
                                <li><a class="" th:href="@{/user/getArticleCollect}">文章收藏</a></li>
                                <li><a class="" th:href="@{/user/getFootMark}">我的足迹</a></li>
                                <li><a class="" th:href="@{/user/toCreMark}">课程评论</a></li>
                                <li><a class="" th:href="@{/user/toAreMark}">文章评论</a></li>
                                <li><a class="" th:href="@{/user/logout}">退出</a></li>
                            </ul>
                        </li>
                    </ul>

                </ul>
                <form class="navbar-form navbar-right" th:action="@{/course/search}" method="get" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" name="search" autocomplete="off" placeholder="搜索 课程/问答">
                        <button class="btn btn-success" type="submit">Search</button>
                    </div>
                </form>
            </div>
        </div>
    </nav>
</div>
<!--轮播-->

<div class="container" style="margin-top:50px;">
    <div id="myCarousel " class="carousel slide" data-interval="2000">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner" style="width:100%;height:400px;">
            <div class="item active">
                <img src="https://dn-simplecloud.shiyanlou.com/assets/1666231330166_755e4c251689fbfda77f2c187ccec5d7"
                     alt="First slide">
            </div>
            <div class="item">
                <img src="https://dn-simplecloud.shiyanlou.com/assets/1665998364117_1873d50b22dccc4b6385270a0f26e104"
                     alt="Second slide" >
            </div>
            <div class="item">
                <img src="https://dn-simplecloud.shiyanlou.com/assets/1666749968777_dd5379fdbfb48dc085977c5c65e00f61"
                     alt="Third slide">
            </div>
        </div>

    </div>
</div>


<div class="introduce-container" id="fourFeatures">
    <div class="container">
        <div class="row">
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img th:src="@{/img/introduceContainer1.gif}"/></a></div>
                <div><span class="introduce-span">全面的计算机课程</span></div>
            </div>
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img th:src="@{/img/introduceContainer2.gif}"/></a></div>
                <div><span class="introduce-span">慢慢干货,快速学习</span></div>
            </div>
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img th:src="@{/img/introduceContainer3.gif}"/></a></div>
                <div><span class="introduce-span">每天一学，巩固基础</span></div>
            </div>
            <div class="introduce-unit col-sm-6 col-md-3">
                <div><a class="introduce-img"><img th:src="@{/img/introduceContainer4.gif}"/></a></div>
                <div><span class="introduce-span">有效学习,记录你的代码</span></div>
            </div>
        </div>
    </div>
</div>

<div class="line-and-laboratory">
    <div class="container">
        <div class="clearfix text-center item-header">
            <span class="line"></span>
            <span class="text-center item-title">学习课程分类</span>
            <span class="line"></span>
        </div>
        <div>
            <div>
                <div th:each="item:${ctypeList}" class="col-xs-12 col-sm-6 col-md-4">
                    <a th:href="'#'+${item.ctypeId}">
                        <div class="path-item">
                            <div class="col-xs-5 col-sm-4 path-img">
                                <img th:src="${item.cimgUrl}">
                            </div>
                            <div class="col-xs-7 col-sm-8">
                                <div class="path-name" th:text="${item.ctypeName}"></div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--公告-->
<div style="background:#fff;">
    <div class="container">
        <button type="button" class="btn btn-primary " data-toggle="collapse"
                data-target="#demo">
            系统公告
        </button>
        <div id="demo" class="collapse in" style="margin-top: 10px;">
            <ul class="list-group">
                <a th:each="item:${noticeList}" th:href="@{toNotice(id=${item.noticeId})}">
                    <li class="list-group-item">
                        <span th:text="${item.noticeName}"></span>
                        <span class="pull-right" th:text="${item.noticeAddtime}"></span>
                    </li>
                </a>

            </ul>
        </div>
    </div>


</div>
<div class="line-and-laboratory">

    <div class="container">
        <div class="clearfix text-center item-header">
            <span class="line"></span>
            <div class="text-center item-title">热门课程</div>
            <span class="line"></span>
        </div>
        <div class="clearfix courses">

            <div th:each="item:${hotCourse}" class="col-md-3 col-sm-6  course">
                <a class="course-box" th:href="@{/course/getById(courseId = ${item.courseId})}">
                    <div class="sign-box">
                        <i class="fa fa-star-o course-follow pull-right"
                           data-follow-url="/courses/1/follow"
                           data-unfollow-url="/courses/1/unfollow" style="display:none"></i>
                    </div>
                    <div class="course-img">
                        <img alt="Linux 基础入门（新版）" th:src="${item.coursePic}">
                    </div>
                    <div class="course-body">
                        <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                              th:title="${item.courseName}">[[${item.courseName}]]</span>
                    </div>
                    <div class="course-footer ">
						<span class="course-per-num pull-left">
							<i class="fa fa-users"></i>
							[[${item.courseClicks}]]
						</span>
                        <span th:if="${item.courseStatus} eq 1" class="pull-right">
                            <img th:src="@{/img/vip-icon.png}">
                            <span>会员</span>
                        </span>
                        <span th:if="${item.courseStatus} eq 0" class="pull-right">
                            <span>免费课程</span>
                        </span>
                    </div>
                </a>
            </div>
        </div>
        <div class="clearfix item-footer">
            <div class="pull-right watch-all">
                <a th:href="@{/course/search(filed='hot')}">查看更多 ></a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="clearfix text-center item-header">
            <span class="line"></span>
            <div class="text-center item-title">最新课程</div>
            <span class="line"></span>
        </div>
        <div class="clearfix courses">

            <div th:each="item:${newCourse}" class="col-md-3 col-sm-6  course">
                <a class="course-box" th:href="@{/course/getById(courseId = ${item.courseId})}">
                    <div class="sign-box">
                        <i class="fa fa-star-o course-follow pull-right"
                           data-follow-url="/courses/1/follow"
                           data-unfollow-url="/courses/1/unfollow" style="display:none"></i>
                    </div>
                    <div class="course-img">
                        <img alt="Linux 基础入门（新版）" th:src="${item.coursePic}">
                    </div>
                    <div class="course-body">
                        <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                              th:title="${item.courseName}">[[${item.courseName}]]</span>
                    </div>
                    <div class="course-footer ">
						<span class="course-per-num pull-left">
							<i class="fa fa-users"></i>
							[[${item.courseClicks}]]
						</span>
                        <span th:if="${item.courseStatus} eq 1" class="pull-right">
                            <img th:src="@{/img/vip-icon.png}">
                            <span>会员</span>
                        </span>
                        <span th:if="${item.courseStatus} eq 0" class="pull-right">
                            <span>免费课程</span>
                        </span>
                    </div>
                </a>
            </div>
        </div>
        <div class="clearfix item-footer">
            <div class="pull-right watch-all">
                <a th:href="@{/course/search(filed='new')}">查看更多 ></a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="clearfix text-center item-header">
            <span class="line"></span>
            <div class="text-center item-title">免费课程</div>
            <span class="line"></span>
        </div>
        <div class="clearfix courses">
            <div th:each="item:${freeCourse}" class="col-md-3 col-sm-6  course">
                <a class="course-box" th:href="@{/course/getById(courseId = ${item.courseId})}">
                    <div class="sign-box">
                        <i class="fa fa-star-o course-follow pull-right"
                           data-follow-url="/courses/1/follow"
                           data-unfollow-url="/courses/1/unfollow" style="display:none"></i>
                    </div>
                    <div class="course-img">
                        <img alt="Linux 基础入门（新版）" th:src="${item.coursePic}">
                    </div>
                    <div class="course-body">
                        <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                              th:title="${item.courseName}">[[${item.courseName}]]</span>
                    </div>
                    <div class="course-footer ">
						<span class="course-per-num pull-left">
							<i class="fa fa-users"></i>
							[[${item.courseClicks}]]
						</span>
                        <span th:if="${item.courseStatus} eq 1" class="pull-right">
                            <img th:src="@{/img/vip-icon.png}">
                            <span>会员</span>
                        </span>
                        <span th:if="${item.courseStatus} eq 0" class="pull-right">
                            <span>免费课程</span>
                        </span>
                    </div>
                </a>
            </div>
        </div>
        <div class="clearfix item-footer">
            <div class="pull-right watch-all">
                <a th:href="@{/course/search(filed='0')}">查看更多 ></a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="clearfix text-center item-header">
            <span class="line"></span>
            <div class="text-center item-title">会员课程</div>
            <span class="line"></span>
        </div>
        <div class="clearfix courses">
            <div th:each="item:${vipCourse}" class="col-md-3 col-sm-6  course">
                <a class="course-box" th:href="@{/course/getById(courseId = ${item.courseId})}">
                    <div class="sign-box">
                        <i class="fa fa-star-o course-follow pull-right"
                           data-follow-url="/courses/1/follow"
                           data-unfollow-url="/courses/1/unfollow" style="display:none"></i>
                    </div>
                    <div class="course-img">
                        <img alt="Linux 基础入门（新版）" th:src="${item.coursePic}">
                    </div>
                    <div class="course-body">
                        <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                              th:title="${item.courseName}">[[${item.courseName}]]</span>
                    </div>
                    <div class="course-footer ">
						<span class="course-per-num pull-left">
							<i class="fa fa-users"></i>
							[[${item.courseClicks}]]
						</span>
                        <span th:if="${item.courseStatus} eq 1" class="pull-right">
                            <img th:src="@{/img/vip-icon.png}">
                            <span>会员</span>
                        </span>
                        <span th:if="${item.courseStatus} eq 0" class="pull-right">
                            <span>免费课程</span>
                        </span>
                    </div>
                </a>
            </div>
        </div>
        <div class="clearfix item-footer">
            <div class="pull-right watch-all">
                <a th:href="@{/course/search(filed='1')}">查看更多 ></a>
            </div>
        </div>
    </div>
</div>
<div th:fragment="footer">
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                    <div class="col-title">公司</div>
                    <a href="privacy/index.html" target="_blank">关于我们</a><br>
                    <a href="privacy/index.html" target="_blank">联系我们</a><br>
                    <a href="http://www.simplecloud.cn/jobs.html" target="_blank">加入我们</a><br>
                    <a href="https://blog.shiyanlou.com" target="_blank">技术博客</a><br>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                    <div class="col-title">合作</div>
                    <a href="privacy/index.html" target="_blank">我要投稿</a><br>
                    <a href="labs/index.html" target="_blank">教师合作</a><br>
                    <a href="edu/index.html" target="_blank">高校合作</a><br>
                    <a href="privacy/index.html" target="_blank">友情链接</a>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                    <div class="col-title">服务</div>
                    <a href="bootcamp/index.html" target="_blank">实战训练营</a><br>
                    <a href="vip/index.html" target="_blank">会员服务</a><br>
                    <a href="courses/reports.html" target="_blank">学习报告</a><br>
                    <a href="questions/index.html?tag=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98" target="_blank">常见问题</a><br>
                    <a href="privacy/index.html" target="_blank">隐私条款</a>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                    <div class="col-title">学习路径</div>
                    <a href="paths/index.html" target="_blank">Java基础学习路径</a><br>
                    <a href="paths/index.html" target="_blank">Java高级学习路径</a><br>
                    <a href="paths/index.html" target="_blank">Mysql学习路径</a><br>
                    <a href="paths/index.html" target="_blank">MyBatis学习路径</a><br>
                    <a href="paths/index.html" target="_blank">JavaWeb学习路径</a><br>
                    <a href="paths/index.html" target="_blank">全部</a>
                </div>
            </div>
        </div>
        <div class="text-center copyright">
            <span>Byte云课版权所有</span>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $('.carousel').carousel()
</script>